<template>
  <el-container class="all">
    <el-header><Header /></el-header>
    <el-container class="inner_container">
      <el-aside class="aside">
        <el-menu
          :default-active="default_active"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="info" @click="goto('/personalHomePage/info')">
            <i class="el-icon-menu" />
            <span slot="title">个人资料</span>
          </el-menu-item>
          <el-menu-item index="changeInfo" @click="goto('/personalHomePage/changeInfo')">
            <i class="el-icon-setting" />
            <span slot="title">账号设置</span>
          </el-menu-item>
          <el-menu-item index="articleList" @click="goto('/personalHomePage/articleList')">
            <i class="el-icon-reading" />
            <span slot="title">我的文章</span>
          </el-menu-item>
          <el-menu-item index="userFocus" @click="goto('/personalHomePage/userFocus')">
            <i class="iconfont icon-exe-my-attention-primary" />
            <span slot="title" style="padding-left:10px">我的关注</span>
          </el-menu-item>
          <el-menu-item index="questionList" @click="goto('/personalHomePage/question')">
            <i class="el-icon-question" />
            <span slot="title">提问</span>
          </el-menu-item>
          <el-menu-item index="collectionList" @click="goto('/personalHomePage/collection')">
            <i class="el-icon-collection" />
            <span slot="title">收藏</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Header from '../header/index.vue'
export default {
  components: { Header },
  data() {
    return {
      default_active: ''
    }
  },
  computed: {

  },
  mounted() {
    this.default_active = this.$route.path.split('/')[2]
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    goto(path) {
      this.$router.replace(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.all {
  background: #f3f4f5;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.el-header{
  padding: 0;
}
.el-main{
  margin-top: 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 100px;
}
.inner_container{
  margin-top: 10px;
  padding: 0;
  margin-left: 370px;
  display: flex;
  justify-self: center;
}
.aside{
  margin-top: 20px;
  width: 150px;
  border-radius: 12px;
}
  @font-face {
  font-family: "iconfont"; /* Project id 3332477 */
  src: url('//at.alicdn.com/t/font_3332477_924gey0t6v.eot?t=1650607517650'); /* IE9 */
  src: url('//at.alicdn.com/t/font_3332477_924gey0t6v.eot?t=1650607517650#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//at.alicdn.com/t/font_3332477_924gey0t6v.woff2?t=1650607517650') format('woff2'),
       url('//at.alicdn.com/t/font_3332477_924gey0t6v.woff?t=1650607517650') format('woff'),
       url('//at.alicdn.com/t/font_3332477_924gey0t6v.ttf?t=1650607517650') format('truetype'),
       url('//at.alicdn.com/t/font_3332477_924gey0t6v.svg?t=1650607517650#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-exe-my-attention-primary:before {
  content: "\e915";
}

.icon-wodeguanzhu:before {
  content: "\e60c";
}

.icon-dianzan_kuai:before {
  content: "\ec8c";
}

.icon-pinglun:before {
  content: "\e891";
}

.icon-dianzan:before {
  content: "\ec7f";
}
</style>
